<template>
  <el-tabs v-model="currentTab" type="border-card" class="j-tabs" @tab-change="onTabChange">
    <el-tab-pane name="1" label="Rotating residential purchase record">
      <div class="mt-0">
        <el-table :data="result.orderData" border stripe style="width: 100%" class="j-table mt-0">
          <el-table-column prop="order_nu" label="Order ID" />
          <el-table-column prop="goods_info" label="Product type" />
          <el-table-column prop="pay_way_str" label="Payment method" />
          <el-table-column prop="amount" label="Payment amount">
            <template #default="scope">
              <span>${{ scope.row.amount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="Order time" />
          <el-table-column prop="status_str" label="Order status" />
        </el-table>
        <div class="j-pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="result.orderPage"
            :pageSize="result.orderLimit"
            :total="result.orderTotal"
            @current-change="
              (val) => {
                onCurrentChange('order', val);
              }
            "
          />
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane name="2" label="Static Residential order record">
      <div class="mt-0">
        <el-table :data="result.staticOrderData" border stripe style="width: 100%" class="j-table mt-0">
          <el-table-column prop="order_nu" label="Order ID" />
          <el-table-column prop="goods_info" label="Product type" />
          <el-table-column prop="pay_way_str" label="Payment method" />
          <el-table-column prop="amount" label="Payment amount">
            <template #default="scope">
              <span>${{ scope.row.amount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="Order time" />
          <el-table-column label="Purchase type">
            <template #default="scope">
              <span v-if="scope.row.is_renew == 0">New</span>
              <span v-else-if="scope.row.is_renew == 1">Renewal</span>
            </template>
          </el-table-column>
          <el-table-column prop="status_str" label="Order status" />
        </el-table>
        <div class="j-pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="result.staticOrderPage"
            :pageSize="result.staticOrderLimit"
            :total="result.staticOrderTotal"
            @current-change="
              (val) => {
                onCurrentChange('staticOrder', val);
              }
            "
          />
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '@/store/modules/user';

  const route = useRoute();
  const router = useRouter();
  const userStore = useUserStore();

  const getUserInfo = computed(() => {
    let userInfo = userStore.getUserInfo || {};
    return userInfo;
  });

  const props = defineProps<{
    result: Object;
  }>();

  const emits = defineEmits<{
    (event: 'confirm'): void;
    (event: 'page-change'): void;
  }>();

  const currentTab = ref('');

  const onCurrentChange = (type, val) => {
    emits('page-change', type, val);
  };

  const onTabChange = (val) => {
    if (val == '1') {
      emits('page-change', 'order', 1);
    } else if (val == '2') {
      emits('page-change', 'staticOrder', 1);
    }
  };

  watch(
    () => props.result,
    () => {
      currentTab.value = props.result.currentTab;
    },
    { deep: true, immediate: true },
  );

  onMounted(() => {});
</script>

<style scoped lang="scss"></style>
